<template>
  <el-card>
    <div class="middle">
    <el-table :data="myBorrow"  :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }">
      <el-table-column prop="borrowId" label="借阅编号"></el-table-column>
      <el-table-column prop="bookId" label="书籍编号"></el-table-column>
      <el-table-column prop="bookName" label="书籍名称" width="200px"></el-table-column>
      <el-table-column prop="author" label="作者" width="200px"></el-table-column>
      <el-table-column prop="startDate" label="开始日期"></el-table-column>
      <el-table-column prop="endDate" label="结束日期"></el-table-column>
      <el-table-column prop="returnBook" label="是否还书">
        <template v-slot="{row}">
          <span v-if="row.returnBook === 1">未还书</span>
          <span v-else>已还书</span>
        </template>
      </el-table-column>
      <el-table-column prop="getBook" label="是否拿书">
        <template v-slot="{row}">
          <span v-if="row.getBook === 1">未拿书</span>
          <span v-else>已拿书</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="{row}">
          <el-button @click="checkBook(row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="bottom" >
      <el-pagination background layout="prev, pager, next" :total="1000" :page-count="pageNumber" class="pagination" @current-change="handlePageChange"/>
    </div>
  </div>
  </el-card>
</template>

<script>
import { useGetDerivedNamespace } from 'element-plus'
import axios, { AxiosError } from 'axios'
import { pa } from 'element-plus/es/locales.mjs'
export default {
    name: 'MyBorrow',
    data(){
      return{
        myBorrow:[
          {
            "borrowId": 99,
            "bookId": 4,
            "bookName": "Java程序设计",
            "author": "耿祥义",
            "startDate": "1999-11-02",
            "endDate": "2006-07-25",
            "returnBook": '未还书',
            "getBook": '未拿书',
          },
          {
            "borrowId": 11,
            "bookId": 88,
            "bookName": "计算机网络：自顶向下方法",
            "author": "James，F.Kurose",
            "startDate": "1977-06-06",
            "endDate": "1978-06-13",
            "returnBook": '未还书',
            "getBook": '未拿书',
          }
        ],
        pageNumber:'',
        username : localStorage.getItem('username')
        
      }
    },
    methods:{
      checkBook(row){
        console.log('check'+row)
        this.$router.push({name:  'BorrowInfo' , query:{bookId:row.bookId}})
      },
      //使用结构赋值进行异常处理
			promise_error_process(promise){
				return promise.then(data=>[null,data])
								.catch(err=>[err,null])
			},
      async getBorrowByAjax(page){
          const response = await axios({
            url				: `http://127.0.0.1:8080/api/borrow/returnBookList/${this.username}/${page}`,
            method			: 'GET',
            withCredentials : true
          })
          return response
      },
      async getBorrow(page){
        const [err,result] = await this.promise_error_process(this.getBorrowByAjax(page))
        if(err){
          console.log('请求异常')
        }
        else{
          console.log(result)
          this.myBorrow = result.data.data.borrows
        }
      },
      async getPageNumberByAjax(){
        const response = await axios({
            url				: `http://127.0.0.1:8080/api/borrow/pageNumber/${this.username}`,
            method			: 'GET',
            withCredentials : true
          })
          return response
      },
      async getPageNumber(){
        const [err,result] = await this.promise_error_process(this.getPageNumberByAjax())
        if(err)
          console.log('请求异常')
        else{
          console.log(result.data.data)
          this.pageNumber = result.data.data
        }
      },
      handlePageChange(page) {
        // 在这里处理页码改变的逻辑
        this.getBorrow(page)
        console.log('当前页码:', page);
        // 可以在这里调用后端接口获取对应页码的数据
      }
    },
    created(){
      this.getPageNumber()
      this.getBorrow(1)
    }
}
</script>

<style>
  .middle{
    text-align: left;
  }
  .bottom{
    display: flex;
    justify-content: space-between;
  }
  .el-pagination{
  justify-content: right;
  margin-right: 55px;
  margin-top: 5px;
  flex: 1;
  }
</style>